// 所属分类的逻辑
import React      from 'react';
import MUtil      from 'util/mm.jsx';
import Product    from 'service/product-service.jsx';

const __mm        = new MUtil();
const __product   = new Product();
import './category-selector.scss';

// 品类选择器
class CategorySelector extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      firstCategoryList   : [],
      firstCategoryId     : 0,
      secondCategoryList  : [],
      secondCategoryId    : 0,
    }
  }

  componentDidMount(){
    this.loadFirstCategory();
  }

  // 处理二级分类的回填
  // nextProps 就是将要传过来什么东西
  componentWillReceiveProps(nextProps){
    // categoryIdChange 和 parentCategoryIdChange 是标记位
    let categoryIdChange       = this.props.categoryId !== nextProps.categoryId,
        parentCategoryIdChange = this.props.parentCategoryId !== nextProps.parentCategoryId;
    // 数据没有发生变化的时候，直接不做处理
    if(!categoryIdChange && !parentCategoryIdChange){
      return;
    }
    // 假如只有一级品类
    if(nextProps.parentCategoryId === 0){
      this.setState({
        firstCategoryId   : nextProps.categoryId,
        secondCategoryId  : 0
      })
    }
    // 假如有二级品类
    else{
      this.setState({
        firstCategoryId   : nextProps.parentCategoryId,
        secondCategoryId  : nextProps.categoryId
      }, () => {
        parentCategoryIdChange && this.loadSecondCategory();
      })
    }
  }

  // 加载一级分类
  // getCategoryList() 比如请求根节点，那么返回一级品类；请求一级品类，那么返回二级品类
  loadFirstCategory(){
    __product.getCategoryList().then((res) => {
      this.setState({
        firstCategoryList : res
      })
    }, (errMsg) => {
      __mm.errorTips(errMsg);
    });
  }

  // 加载二级品类
  loadSecondCategory(){
    __product.getCategoryList(this.state.firstCategoryId).then(res => {
      // console.log(res);
      this.setState({
        secondCategoryList : res
      })
    }, errMsg => {
      __mm.errTips(errMsg);
    });
  }

  // 选择一级品类之后触发的事件
  onFirstCategoryChange(e){
    if(this.props.readOnly){
      return;
    }
    // 这个新的值就是我们选择的一级品类的值
    // 当我们选择一级品类的时候，二级品类应该先清空
    let newValue = e.target.value || 0;
    this.setState({
      firstCategoryId   : newValue,
      secondCategoryId  : 0,
      secondCategoryList: []
    }, () => {
      // 更新二级品类
      this.loadSecondCategory();
      // 暴露一级品类
      this.onPropsCategoryChange();
    });
  }

  // 选择二级品类之后触发的事件
  onSecondCategoryChange(e){
    if(this.props.readOnly){
      return;
    }
    let newValue = e.target.value || 0;
    this.setState({
      secondCategoryId   : newValue
    }, () => {
      // 暴露二级品类
      this.onPropsCategoryChange();
    });
  }

  // 传给父组件选中的结果
  onPropsCategoryChange(){
    // 判断 props 里的回调函数存在吗
    let categoryChangeable = typeof this.props.onCategoryChange === 'function';
    // 如果是有二级品类
    if(this.state.secondCategoryId){
      categoryChangeable && this.props.onCategoryChange(this.state.secondCategoryId, this.state.firstCategoryId);
    }
    // 如果只有一级品类
    else{
      categoryChangeable && this.props.onCategoryChange(this.state.firstCategoryId, 0);
    }
  }

  render(){
    return (
      <div className="col-md-5">
        <select
          className="form-control cate-select"
          value={this.state.firstCategoryId}
          onChange={(e) => this.onFirstCategoryChange(e)}
          readOnly={this.props.readOnly}
        >
          <option value="">请选择一级分类</option>
          {
            this.state.firstCategoryList.map(
              (category, index) => <option value={category.id} key={index}>{category.name}</option>
            )
          }
        </select>
          {this.state.secondCategoryList.length
            ? (<select
                className="form-control cate-select"
                value={this.state.secondCategoryId}
                onChange={(e) => this.onSecondCategoryChange(e)}
                readOnly={this.props.readOnly}
                >
                <option value="">请选择二级分类</option>
                {
                  this.state.secondCategoryList.map(
                    (category, index) => <option value={category.id} key={index}>{category.name}</option>
                  )
                }
              </select>)
            : null
          }
      </div>
    );
  }
}

export default CategorySelector;
